<template>
    <el-drawer v-model="visible" :with-header="false" :size="800" destroy-on-close @closed="handleClose">
        <el-container v-loading="loading">
            <el-main style="padding:20px 20px 20px 20px" class="">
                <el-container class="is-vertical">
                    <sc-title title="日志详情"></sc-title>
                    <el-row>
                        <el-col :span="24">
                        <el-tabs v-model="tabName">
                            <el-tab-pane label="变化数据" v-if="info?.changeData?.length > 0" name="tab_1">
                            <el-form class="details-from" label-width="120px" label-position="right">
                                <el-table ref="tablelist" :data="info?.changeData" border style="width: 100%">
                                    <el-table-column prop="name" label="字段" width="150"></el-table-column>
                                    <el-table-column label="编辑前">
                                        <template #default="{ row }">
                                            <template v-if="row.isFile">
                                                <template v-if="row.before.length > 0">
                                                    <template v-for="(_item, index) in row.before">
                                                        <template v-if="index == 0">{{_item}}</template>
                                                        <template v-else>，{{_item}}</template>
                                                    </template>
                                                </template>
                                                <template v-else>
                                                    <div>{{ row.before }}</div>
                                                </template>
                                            </template>
                                            <template v-else>
                                                <div v-html="row.before" class="html-cotent"></div>
                                            </template>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="编辑后">
                                        <template #default="{ row }">
                                            <template v-if="row.isFile">
                                                <template v-if="row.after.length > 0">
                                                    <template v-for="(_item, index) in row.after">
                                                        <template v-if="index == 0">{{_item}}</template>
                                                        <template v-else>，{{_item}}</template>
                                                    </template>
                                                </template>
                                                <template v-else>
                                                    <div>{{ row.after }}</div>
                                                </template>
                                            </template>
                                            <template v-else>
                                                <div v-html="row.after" class="html-cotent"></div>
                                            </template>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-form>
                            </el-tab-pane>
                        </el-tabs>
                        </el-col>
                    </el-row>
                </el-container>
            </el-main>
            <el-footer>
                <el-button @click="visible=false">关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>

    <scDialog v-model="play.status" :title="'查看视频'" :width="800">
        <div style="display: flex; align-items:center;justify-content: center;">
            <video ref="videoControls" :src="play.src" controls style="width: 100%; height: 400px; background:#000;"></video>
        </div>
        <template #footer>
            <el-button @click="closePlay()">取 消</el-button>
        </template>
    </scDialog>

</template>

<script>
import { in_array } from '@/utils/index.js'
export default {
    components: {},
    data() {
        return {
            in_array,
            visible: false,
            loading: false,
            info: {
                changeData: null
            },
            tabName: 'tab_1',
            play: {
                src: '',
                status: false
            },
        }
    },
    methods: {
        open() {
            this.info = {}
			this.visible = true;
			return this;
        },
        async setData(row) {
            this.loading = true
            this.$API.operationLog.action.get({id: row.id}).then((res) => {
                this.info = res.data

                this.loading = false
            }, () => {
                this.loading = false
            })

        },
        handleClose() {
            this.info = {}
        },
        prewFun(url) {
            window.open(url)
        },
        canPlay(url) {
            this.play.status = true
            this.play.src = url
            this.$nextTick(() => {
                this.$refs.videoControls && this.$refs.videoControls.load()
            })
        },
        closePlay() {
            this.$refs.videoControls && this.$refs.videoControls.pause()
            this.play.status = false
        }
    }
}
</script>

<style scoped>
.tcontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}
.title {
    font-size: 14px;
    padding-left: 6px;
    font-weight: 500;
    padding-bottom: 20px;
}
.info {
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.info:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
[data-theme="dark"] .info {
    border-color: #434343;
}
:deep(.el-form-item__content) {
    font-size: 12px !important;
}
:deep(.el-image-viewer__close) {
    background-color: unset;
}
.el-form-item__label {
    text-align: justify;
}

.sc-upload-list {display: inline-block;}
.sc-upload-list li {list-style: none;display: inline-block;width: 120px;height: 120px;margin-right: 10px;vertical-align: top;box-sizing: border-box;}


.details-from {
   margin-top: 10px;
}

.el-tag {
  margin-right: 5px;
}

pre {
  line-height: 1.6;
  margin-top: 10px;
  width: 100%;
}

:deep(.html-cotent p){
  line-height: 2.5;
  padding: 0;
  margin: 0;
}

:deep(.html-cotent img){
  max-width: 100%;
}

:deep(.el-form-item__content .html-cotent){
}
</style>